<template>
  <div>
    <div v-for="item in dataArr" :key="item.id">
      <div class="item">
        <!-- <img :id="item.craftCode" alt="" style="width: 100%" /> -->
        <div id="qrcode" class="qrcode" ref="codeItem"></div>
        <!-- <p> <span style="font-weight: bold;">{{'【'+item.craftName +'】'}}</span> {{item.deviceName }}</p> -->
      </div>
    </div>
  </div>
</template>

<script>
import JsBarcode from "jsbarcode";
import QRCode from "qrcodejs2";
export default {
  name: "code",
  props: {
    dataArr: {
      type: Array,
      default:()=>{
        return []
      } ,
    },
    types: {
      type: String,
      default:()=>{
        return ''
      } ,
    },
  },
  data() {
    return {
      showT: true,
      num: 8,
    };
  },
  watch: {
    dataArr: {
      deep: true,
      immediate: true,
      handler(val) {
        if (val.length > 0) {
          this.dataArr = val;
          this.bindQRCode()
        }
      },
    },
  },
  created() {},
  mounted() {},
  methods: {
    bindQRCode() {
      if(this.types == '成品入库'){
        this.$nextTick(() => { 
          this.dataArr.forEach((item,index)=>{
            this.$refs.codeItem[index].innerHTML="";
              var qrcode = new QRCode(this.$refs.codeItem[index], {
                text: item.productSpecificationCode+'-'+item.packageGuiGeNo+'-'+item.areaShelfCode, //二维码内容
                width: 170,
                height: 150,
                render: 'table',
                colorDark: "#333333", //二维码颜色
                colorLight: "#ffffff", //二维码背景色
                correctLevel : QRCode.CorrectLevel.H //容错率，L/M/H
              })
          });                          
        },500)
      }else{
        this.$nextTick(() => { 
          this.dataArr.forEach((item,index)=>{
            this.$refs.codeItem[index].innerHTML="";
              var qrcode = new QRCode(this.$refs.codeItem[index], {
                text: item.specificationCode+'-'+item.productionBatchCode+'-'+item.areaShelfCode, //二维码内容
                width: 170,
                height: 150,
                render: 'table',
                colorDark: "#333333", //二维码颜色
                colorLight: "#ffffff", //二维码背景色
                correctLevel : QRCode.CorrectLevel.H //容错率，L/M/H
              })
          });                          
        },500)
      }
      }, 
  },
};
</script>

<style lang="scss" scoped>
.item {
  float: left;
  margin-right: 10px;
  margin-bottom: 20px;
  padding-left: 40px;
  width: 31%;
}

.item p{
  margin-top: 10px;
  text-align: center;
  width: 170px;
  
}
</style>
